<template>
  <div class="box">
    <div class="header">
      <button @click="toLogins">登录</button>
    </div>
    <div class="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item.imgurl" />
          </van-swipe-item>
        </van-swipe>
        <!-- 应用栏 -->
        <van-grid :column-num="5">
          <van-grid-item
            v-for="item in navList"
            :key="item.navid"
            :icon="item.imgurl"
            :text="item.title"
          />
        </van-grid>
        <!-- 倒计时 -->
        <div class="top">
          限时抢购倒计时
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
        <!-- 商品秒杀 -->
        <div class="top">
          <ul class="seckill">
            <li v-for="item in seckillList" :key="item.proid" @click="jumpTo">
              <van-image width="60" height="60" :src="item.img1" />
              <p class="active">￥{{ item.originprice }}</p>
            </li>
          </ul>
        </div>
        <!-- 分页列表数据 -->
        <div>
          <ul :class="isShow ? 'prolist2' : 'prolist1'">
            <li
              class="van-hairline--bottom van-hairline--right"
              v-for="item in proList"
              :key="item.proid"
            >
              <img width="100%" :src="item.img1" alt="" />
              <div>
                <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
                <p>￥{{ item.originprice }}</p>
              </div>
            </li>
            <div class="toggle" @click="isShow = !isShow">
              <van-icon name="bars" v-if="isShow" />
              <van-icon name="apps-o" v-else />
            </div>
          </ul>
        </div>
      </van-pull-refresh>
      <div class="toggle1" v-if="scrollTop > 400" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
  </div>
</template> 

<script>
import {
  getBannerList,
  getNavList,
  getSeckillList,
  getProList,
} from "../api/home";
import $axios from "../utils/request";

import Vue from "vue";
import { Toast } from "vant";
import {
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  CountDown,
  Image as VanImage,
  Icon,
  List,
  PullRefresh,
} from "vant";
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(List);

Vue.use(PullRefresh);

export default {
  name: "Home",
  components: {},
  data() {
    return {
      navList: [],
      bannerList: [],
      time: 24 * 60 * 60 * 600,
      seckillList: [],
      proList: [],
      isShow: true,
      isLoading: false,
      loading: false,
      finished: false,
      scrollTop: 0,
      count: 2,
      timer: null,
    };
  },
  methods: {
    onLoad() {
      this.loading = true;
      $axios
        .get("/pro/list", { params: { count: this.count, limitNum: 12 } })
        .then((data) => {
          console.log(data.data.data);
          this.loading = false;
          if (data.data.data.length == 0) {
            this.finished = true;
          } else {
            this.proList = [...this.proList, ...data.data.data]; // this.prolist = 原有的数据+ 新加载出来的数据
            this.count++;
          }
        });
    },
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    scrollMe() {
      this.scrollTop = this.$refs.main.scrollTop;
    },
    backTop() {
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 15);
    },
    toLogins() {
      this.$router.push("/Login");
    },
  },

  created() {
    getBannerList().then((str) => {
      console.log(str.data);
      this.bannerList = str.data;
    });
    getNavList().then((str) => {
      // console.log(str.data);
      this.navList = str.data;
    });
    getSeckillList().then((str) => {
      this.seckillList = str.data.data;
    });
    getProList({ count: this.count, limitNum: 12 }).then((str) => {
      this.proList = str.data.data;
    });
  },
};
</script>
<style scoped>
/* 轮播图 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe {
  height: 1.8rem;
}
.my-swipe img {
  height: 100%;
}

.top {
  margin-bottom: 0.1rem;
  min-height: 0.2rem;
  background-color: #fff;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.seckill {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
}
.active {
  color: red;
}

.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.prolist1 li {
  width: 49%;
}

.prolist2 li {
  display: flex;
}
.prolist2 li img {
  width: 30%;
  height: 100%;
}
.prolist2 li div {
  flex: 1;
  color: black;
  font-size: 0.16rem;
}

/* 切换图标 */
.toggle {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid rgb(46, 15, 171);
  border-radius: 50%;
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
.toggle1 {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid rgb(46, 15, 171);
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
</style>
